import React  from 'react';
/**
 * ajax 异步调用接口插件
 * 安装 axios 
 * npm install axios
 * 本文件只是简单介绍axios 使用,
 * 使用详细信息参见: https://blog.csdn.net/m0_64450406/article/details/141273572
 */ 
import axios   from 'axios';

// 状态
class App extends React.Component{
  state = {
    list: [],
  };

  /**
   * 这是一个初始化生命周期函数,组件生命周期内只调用一次
   * 它在组件挂载到 DOM 树之后立即调用。
   */
  componentDidMount() {
    console.log("第一次did mount", document.getElementById("myname"));
    // 数据请求axios
    axios({
      method:"GET",// 请求方式 常用 get post 
      url:"https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=715684",
      data:{},//参数
      headers:{  // 请求头
        "X-Host":"mall.film-ticket.film.list"
      }
    }).then(response=>{// 返回参数 
      console.log(response);
      this.setState({
        list:response.data.data.films
      });
    }).catch(function (error) {  
      console.log(error);  
    });
    // 订阅函数调用
    // setInterval
    // 基于创建的完的dom进行 初始化，，，，，，BetterScroll
  }

  render() {
    return (
      <div>
      <ul>
        {this.state.list.map((item) => (
          <li key={item.filmId}>{item.name}</li>
        ))}
      </ul>
    </div>
    );
  }
}

export default App;
